Page({
  /**
   * 页面的初始数据
   */
  data: {
    chatList: [], // 聊天记录列表
    inputValue: '', // 输入框内容
    scrollTop: 0, // 聊天区域滚动位置
    showEmojiPanel: false, // 是否显示表情面板
    isServiceTyping: false, // 客服是否正在输入
    currentTime: '', // 当前时间
    // 常用表情集合
    emojiList: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🤗', '🤩', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪', '😫', '🥱', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🥺', '😢', '🤯', '😳', '🥶', '🥵', '😠', '😡', '🤬', '😈', '👿', '💀', '☠️', '👻', '👽', '🤖']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 设置当前时间
    this.setCurrentTime();
    // 页面加载时，添加系统欢迎消息
    this.addSystemMessage('连接客服中...');
    // 模拟客服连接延迟
    setTimeout(() => {
      this.addServiceMessage('您好！我是巷子深茶美文化馆的在线客服，很高兴为您服务。有什么可以帮您咨询的？');
    }, 1500);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 添加客服在线状态提醒
    if (this.data.chatList.length === 0) {
      this.addSystemMessage('客服在线，您的消息将尽快得到回复');
    }
  },

  /**
   * 设置当前时间
   */
  setCurrentTime: function() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    this.setData({
      currentTime: `${hours}:${minutes}`
    });
  },

  /**
   * 处理输入框内容变化
   */
  handleInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  /**
   * 发送消息
   */
  sendMessage: function() {
    const { inputValue, chatList } = this.data;
    // 输入为空时不发送
    if (!inputValue.trim()) return;

    // 添加用户消息到聊天列表
    const newChatList = [
      ...chatList,
      { 
        role: 'user', 
        content: inputValue.trim(),
        timestamp: this.formatTime(new Date())
      }
    ];
    this.setData({
      chatList: newChatList,
      inputValue: '', // 清空输入框
      showEmojiPanel: false // 隐藏表情面板
    });

    // 滚动到最新消息
    this.scrollToBottom();

    // 显示客服正在输入状态
    this.setData({
      isServiceTyping: true
    });

    // 模拟客服回复
    this.mockServiceReply(inputValue.trim());
  },

  /**
   * 格式化时间
   */
  formatTime: function(date) {
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  },

  /**
   * 模拟客服回复（根据用户输入关键词匹配回复）
   */
  mockServiceReply: function(userInput) {
    let serviceReply = '';
    // 随机延迟 1-3 秒，模拟客服思考和回复时间
    const delay = Math.floor(Math.random() * 2000) + 1000;
    
    // 关键词匹配（可根据实际需求扩展）
    if (userInput.includes('白茶') || userInput.includes('产品')) {
      serviceReply = '我们的白茶产品包括明星茶、主题茶、礼品茶、年份茶等系列，均采用优质原料制作，具有极高的收藏和饮用价值，您可以点击小程序首页的分类查看详情~';
    } else if (userInput.includes('地址') || userInput.includes('门店')) {
      serviceReply = '巷子深茶美文化馆位于泉城济南，具体地址：山东省济南市市中区中山广场一座102a，欢迎您到店体验！';
    } else if (userInput.includes('购买') || userInput.includes('下单')) {
      serviceReply = '您可以直接在小程序首页选择喜欢的产品，加入购物车后完成下单，支持快递配送；也可预约到店自提，全国部分地区支持次日达~';
    } else if (userInput.includes('存储') || userInput.includes('保存')) {
      serviceReply = '白茶适合在干燥、通风、阴凉、无异味的环境中存储，避免阳光直射和潮湿，我们的产品均提供专业仓储包装，家庭存储可参考此标准哦~';
    } else if (userInput.includes('退换') || userInput.includes('退款')) {
      serviceReply = '我们支持7天无理由退换货服务，产品质量问题可联系客服申请退换或退款，请您放心购买！';
    } else if (userInput.includes('谢谢') || userInput.includes('感谢')) {
      serviceReply = '不客气，很高兴能够帮到您！如有其他问题，随时欢迎咨询~';
    } else {
      serviceReply = '非常抱歉，您的问题我暂时还未理解，您可以尝试询问具体的白茶产品、购买方式、门店地址等相关问题，我会尽力为您解答！';
    }

    // 延迟显示客服回复
    setTimeout(() => {
      // 隐藏正在输入状态
      this.setData({
        isServiceTyping: false
      });
      // 添加客服回复
      this.addServiceMessage(serviceReply);
    }, delay);
  },

  /**
   * 添加系统消息到聊天列表
   */
  addSystemMessage: function(content) {
    const { chatList } = this.data;
    const newChatList = [
      ...chatList,
      { role: 'system', content: content }
    ];
    this.setData({
      chatList: newChatList
    });
    this.scrollToBottom();
  },

  /**
   * 添加客服消息到聊天列表
   */
  addServiceMessage: function(content) {
    const { chatList } = this.data;
    const newChatList = [
      ...chatList,
      { 
        role: 'service', 
        content: content,
        timestamp: this.formatTime(new Date())
      }
    ];
    this.setData({
      chatList: newChatList
    });
    this.scrollToBottom();
  },

  /**
   * 滚动到最新消息
   */
  scrollToBottom: function() {
    // 延迟获取滚动高度（确保 DOM 已更新）
    setTimeout(() => {
      this.setData({
        scrollTop: 999999 // 滚动到最底部
      });
    }, 100);
  },

  /**
   * 切换表情面板显示/隐藏
   */
  toggleEmojiPanel: function() {
    this.setData({
      showEmojiPanel: !this.data.showEmojiPanel
    });
  },

  /**
   * 隐藏表情面板
   */
  hideEmojiPanel: function() {
    this.setData({
      showEmojiPanel: false
    });
  },

  /**
   * 选择表情
   */
  chooseEmoji: function(e) {
    const { emoji } = e.currentTarget.dataset;
    const { inputValue } = this.data;
    
    // 检查输入长度限制
    if (inputValue.length >= 500) {
      wx.showToast({
        title: '输入内容已达上限',
        icon: 'none'
      });
      return;
    }
    
    this.setData({
      inputValue: inputValue + emoji
    });
  },

  /**
   * 选择图片并发送
   */
  chooseImage: function() {
    const { chatList } = this.data;
    // 调用微信选择图片 API
    wx.chooseImage({
      count: 1, // 最多选择 1 张图片
      sizeType: ['compressed'], // 使用压缩图提高加载速度
      sourceType: ['album', 'camera'], // 相册/相机
      success: (res) => {
        const tempFilePath = res.tempFilePaths[0]; // 临时图片路径
        // 添加图片消息到聊天列表
        const newChatList = [
          ...chatList,
          { 
            role: 'user', 
            content: tempFilePath, 
            type: 'image',
            timestamp: this.formatTime(new Date())
          }
        ];
        this.setData({
          chatList: newChatList,
          showEmojiPanel: false // 隐藏表情面板
        });
        // 滚动到最新消息
        this.scrollToBottom();
        
        // 显示客服正在输入状态
        this.setData({
          isServiceTyping: true
        });
        
        // 模拟客服回复图片消息
        setTimeout(() => {
          // 隐藏正在输入状态
          this.setData({
            isServiceTyping: false
          });
          this.addServiceMessage('您发送的图片我已收到，正在为您查看...');
          
          // 模拟客服再次回复
          setTimeout(() => {
            this.addServiceMessage('图片中的产品看起来很不错！如果您需要了解更多详情或有其他问题，请随时告诉我。');
          }, 1500);
        }, 2000);
      }
    });
  },

  /**
   * 预览图片
   */
  previewImage: function(e) {
    const { src } = e.currentTarget.dataset;
    wx.previewImage({
      urls: [src],
      current: src
    });
  },

  /**
   * 显示客服服务信息
   */
  showServiceInfo: function() {
    wx.showModal({
      title: '客服服务说明',
      content: '客服工作时间：9:00-18:00\n\n如有紧急问题，您也可以通过以下方式联系我们：\n电话：400-123-4567\n邮箱：service@xiangzishen.com',
      showCancel: false
    });
  },

  /**
   * 清空聊天记录
   */
  clearChat: function() {
    wx.showModal({
      title: '提示',
      content: '确定要清空所有聊天记录吗？',
      success: (res) => {
        if (res.confirm) {
          this.setData({
            chatList: []
          });
          // 清空后发送系统提示
          this.addSystemMessage('聊天记录已清空，有什么可以帮您咨询的？');
        }
      }
    });
  }
});